
const onBox = document.querySelector('.on')
const offBox = document.querySelector('.off')
const nameBox = onBox.querySelector('.username')
// 登录验证
testLogin()
function testLogin() {
  // 1. 怎么知道你是否登录过
  // 如果你的 localStorage 内有 login 信息, 并且值为 1, 表示你曾经登录过
  const login = getcookie('login')
  const info = getcookie('info')
  const id = getcookie('id')
  console.log(info,id,login);
  // 1-1. 获取到 localStorage 内的 login 信息
  if (login !== '1') {
    // 1-2. 证明你从来没有登录过
    offBox.classList.add('active')
    onBox.classList.remove('active')
    window.location.href = './login.html'
    return
  }
  nameBox.innerText = info
}

const ul = document.querySelector('.list')
const show = document.querySelector('.show')
const goods = JSON.parse(window.localStorage.getItem('detial'))
const discribe = document.querySelector('.discribe')

//渲染页面
bindHtml(goods)
function bindHtml(data){
  console.log(data);
    let str = ''
    str = `
      <li class="active">
        <img 
          src="${ data.img_url }"
          data-show="${ data.img_url }"
          data-enlarge="${ data.img_url }"
          alt="">
      </li>
      <li>
          <img 
            src="${ data.img_show_url }" 
            data-show="${ data.img_show_url }"
            data-enlarge="${ data.img_show_url }"
            alt="">
      </li>
    `
    ul.innerHTML = str
    let str1 = ''
    str1 = `
      <img src="${ data.img_url }" alt="">
      <div class="mask"></div>
    `
    show.innerHTML = str1
    let str2 = ''
    str2 = `
      <h3>${ data.name }</h3>
      <div>${ data.title }</div>
      <div><span>￥${ data.new_price }</span><span>￥${ data.last_price }</span></div>
      <div>
          <span>数量</span>
          <button>-</button>
          <input type="text" value="1" name="1">
          <button>+</button>
      </div>
      <div>
          <button class="buy">立即购买</button>
          <button class="add">加入购物车</button>
      </div>

    `
    discribe.innerHTML = str2
}
// 放大镜的构造函数
function Enlarge(select) {
    this.ele = document.querySelector(select)
    this.show = this.ele.querySelector('.show')
    this.mask = this.ele.querySelector('.mask')
    this.list = this.ele.querySelector('.list')
    this.enlarge = this.ele.querySelector('.enlarge')
    this.show_width = this.show.offsetWidth
    this.show_height = this.show.offsetHeight
    this.mask_width = parseInt(window.getComputedStyle(this.mask).width)
    this.mask_height = parseInt(window.getComputedStyle(this.mask).height)
    this.bg_width = parseInt(window.getComputedStyle(this.enlarge).backgroundSize.split(' ')[0])
    this.bg_height = parseInt(window.getComputedStyle(this.enlarge).backgroundSize.split(' ')[1])
    const url = window.sessionStorage.getItem('url')
    this.enlarge.style.backgroundImage = `url(${url})`
    this.init()
  }
  
  Enlarge.prototype.init = function () {
    this.setScale()
    this.overOut()
    this.changeList()
    this.move()
  }

  Enlarge.prototype.setScale = function () {
    this.enlarge_width = this.bg_width * this.mask_width / this.show_width
    this.enlarge_height = this.bg_height * this.mask_height / this.show_height
  
    this.enlarge.style.width = this.enlarge_width + 'px'
    this.enlarge.style.height = this.enlarge_height + 'px'
  }
  
  Enlarge.prototype.overOut = function () {
    // 2-1. 绑定鼠标移入事件
    this.show.addEventListener('mouseover', () => {
      this.mask.style.display = 'block'
      this.enlarge.style.display = 'block'
    })
  
    // 2-2. 绑定鼠标移出事件
    this.show.addEventListener('mouseout', () => {
      this.mask.style.display = 'none'
      this.enlarge.style.display = 'none'
    })
  }
  
  Enlarge.prototype.changeList = function () {
    this.list.addEventListener('click', e => {
      // 处理事件对象兼容
      e = e || window.event
      // 处理事件目标兼容
      const target = e.target || e.srcElement
  
      // 判断点击的是 img 标签
      // 节点属性: 元素节点的 nodeName: 大写标签名
      // target是准确触发事件的元素, 如果准确触发事件的元素的标签名是 IMG, 那么证明我点击的是 要切换的图片
      // 执行切换的操作
      if (target.nodeName === 'IMG') {
        const show_url = target.dataset.show
        const enlarge_url = target.dataset.enlarge
  
        // 更换地址
        this.show.firstElementChild.src = show_url
        this.enlarge.style.backgroundImage = `url(${ enlarge_url })`
  
        // 更换 p 标签的 active 类名
        // 给 list 的所有子元素取消 active
        for (let i = 0; i < this.list.children.length; i++) {
          this.list.children[i].classList.remove('active')
        }
        target.parentElement.classList.add('active')
      }
    })
  }
  
  // 4. 跟随移动
  Enlarge.prototype.move = function () {
    // 4-1. 给 this.show 绑定事件
    this.show.addEventListener('mousemove', e => {
      // 处理事件对象兼容
      e = e || window.event
      // 4-2. 拿到坐标点
      let x = e.offsetX - this.mask_width / 2
      let y = e.offsetY - this.mask_height / 2
  
      // 4-3. 边界值判断
      if (x <= 0) x = 0
      if (y <= 0) y = 0
      if (x >= this.show_width - this.mask_width) x = this.show_width - this.mask_width
      if (y >= this.show_height - this.mask_height) y = this.show_height - this.mask_height
  
      // 4-4. 给 this.mask 进行 left 和 top 的赋值
      this.mask.style.left = x + 'px'
      this.mask.style.top = y + 'px'
  
      // 4-5. 让 enlarge 盒子的背景图片定位跟随成比例联动
      // 公式: 背景图移动距离 = mask 移动距离 * enlarge 盒子尺寸 / mask 盒子尺寸
      const bgx = x * this.enlarge_width / this.mask_width
      const bgy = y * this.enlarge_height / this.mask_height
  
      // 4-6. 给 enlarge 盒子的 backgroundPosition 赋值
      this.enlarge.style.backgroundPosition = `-${ bgx }px -${ bgy }px`
    })
  }


//购买按钮  添加进购物车按钮 的点击事件
const buyBtn = document.querySelector('.buy')
const addBtn = document.querySelector('.add')

//获取本地存储的数据
function getData() {
  //把数据存在本地存储的 goods 里面
  var data = window.localStorage.getItem('goods')
  if (data !== null) {
    //把获取到的字符串格式数据转换成对象格式
    return JSON.parse(data);
  } else {
    return [];
  }
}
//保存本地存储数据
function saveData(data) {
  window.localStorage.setItem('goods', JSON.stringify(data))
}
//加入购物车按钮
addBtn.addEventListener('click', () => {
    const data = window.localStorage.getItem('detail')
    console.log(data);
  
    const data1 = getData()
    console.log(data1);
    //在存数据的数组里面的加一条最新点击的商品信息
    data1.push(goods)
    //把最新的数据的数组存在本地存储里面
    saveData(data1)  
 
  alert('加入购物车成功，快去购物车看看吧！')
  window.location.href = './cart.html'
})

//购买按钮
buyBtn.addEventListener('click',() => {
    alert('购买成功！')
})

//去到购物车
const gouwuche = document.querySelector('.gouwuche')
gouwuche.addEventListener('click', () => {
  window.location.href = './cart.html'
})